<template>
  <div class="page-list-page">
    <a-button class="add-btn" type="primary" @click="openAppModal"
      >添加页面</a-button
    >
    <a-directory-tree
      :tree-data="appInfo.pages"
      :replaceFields="{ children: 'components', title: 'name', key: 'key' }"
    >
      <template #title="{ key, name, type }">
        <span
          class="tree-name"
          :title="name"
          @click="handleTreeSelect(type, key)"
          >{{ name }} ({{ key }})</span
        >

        <a-dropdown v-if="type === 'page'">
          <a class="ant-dropdown-link" @click.prevent>
            <EllipsisOutlined style="font-size: 18px" />
          </a>
          <template #overlay>
            <a-menu @click="handleMenu($event, key)">
              <a-menu-item key="1">页面设置</a-menu-item>
              <a-menu-item key="2">删除页面</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </a-directory-tree>

    <!-- 创建修改页面设置 -->
    <a-modal
      v-model:visible="showPageModal"
      :title="isAddPage ? '添加页面' : '修改页面配置'"
      :footer="null"
      :afterClose="closePageModal"
      :maskClosable="false"
    >
      <a-form
        :model="pageModalForm"
        :rules="pageModalRules"
        v-bind="pageModalLayout"
        ref="pageModalFormRef"
      >
        <a-form-item label="页面名称" name="name">
          <a-input
            v-model:value="pageModalForm.name"
            :maxlength="5"
            placeholder="请输入页面名称"
          />
        </a-form-item>
        <a-form-item label="页面高度" name="height" v-show="!isAddPage">
          <a-input
            v-model:value="pageModalForm.height"
            :maxlength="5"
            placeholder="请输入页面高度"
          />
        </a-form-item>
        <a-form-item label="背景颜色" name="backgroundColor">
          <a-input
            v-model:value="pageModalForm.backgroundColor"
            placeholder="请输入表示颜色的代码"
          />
        </a-form-item>
        <a-form-item label="背景图片" name="backgroundImage">
          <a-input
            v-model:value="pageModalForm.backgroundImage"
            placeholder="请输入图片链接地址"
          />
        </a-form-item>
        <a-form-item
          label="图片尺寸"
          name="backgroundSize"
          v-show="pageModalForm.backgroundImage"
        >
          <a-input
            v-model:value="pageModalForm.backgroundSize"
            placeholder="请输入背景图片尺寸"
          />
        </a-form-item>
        <a-form-item
          label="平铺模式"
          name="backgroundRepeat"
          v-show="pageModalForm.backgroundImage"
        >
          <a-input
            v-model:value="pageModalForm.backgroundRepeat"
            placeholder="请输入背景图片平铺模式"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="pageModalSubmit">确认</a-button>
          <a-button style="margin-left: 10px" @click="closePageModal"
            >取消</a-button
          >
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { uuid } from '@/assets/ts/util'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { useAppMock } from '@/hooks/usePageJson'
import { EllipsisOutlined } from '@ant-design/icons-vue'
import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface'

interface PageForm {
  key: string
  name: string
  height: string
  backgroundColor: string
  backgroundImage: string
  backgroundSize: string
  backgroundRepeat: string
}

// 创建修改页面的弹窗
const handlePageModal = () => {
  const showPageModal = ref(false)
  const isAddPage = ref(true)
  const pageModalFormRef = ref()

  const pageModalForm: PageForm = reactive({
    key: '',
    name: '',
    height: '',
    backgroundColor: '',
    backgroundImage: '',
    backgroundSize: '100% 100%',
    backgroundRepeat: 'no-repeat',
  })

  const pageModalRules = {
    name: {
      required: true,
      trigger: 'blur',
      message: '请输入页面名称',
    },
  }

  const openAppModal = (isAdd = true, page?: PageForm) => {
    showPageModal.value = true
    isAddPage.value = isAdd
    if (page) {
      pageModalForm.key = page.key
      pageModalForm.name = page.name
      pageModalForm.height = page.height
      pageModalForm.backgroundColor = page.backgroundColor
      pageModalForm.backgroundImage = page.backgroundImage
      pageModalForm.backgroundSize = page.backgroundSize
      pageModalForm.backgroundRepeat = page.backgroundRepeat
    }
  }

  const closePageModal = () => {
    showPageModal.value = false
    pageModalForm.key = ''
    pageModalForm.name = ''
    pageModalForm.height = ''
    pageModalForm.backgroundColor = ''
    pageModalForm.backgroundImage = ''
    pageModalForm.backgroundSize = '100% 100%'
    pageModalForm.backgroundRepeat = 'no-repeat'
  }

  return {
    showPageModal,
    isAddPage,
    pageModalFormRef,
    pageModalForm,
    pageModalRules,
    pageModalLayout: { labelCol: { span: 4 } },
    openAppModal,
    closePageModal,
  }
}

export default defineComponent({
  name: 'PageList',
  components: {
    EllipsisOutlined,
  },
  setup() {
    const route = useRoute()

    const {
      appInfo,
      currentPage,
      addAppPage,
      editPageConfig,
      changeCurrentPage,
      changeCurrentCom,
    } = useAppMock(route.params.id as string)

    if (appInfo.pages.length < 1) {
      const page = {
        key: 'page_' + uuid(),
        name: '第一页',
        config: {
          height: '',
          backgroundColor: '',
          backgroundImage: require('../../assets/img/image-template2.jpg'),
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
        },
      }
      addAppPage(page)
      changeCurrentPage(page.key)
    }

    const {
      showPageModal,
      isAddPage,
      pageModalFormRef,
      pageModalForm,
      pageModalRules,
      pageModalLayout,
      openAppModal,
      closePageModal,
    } = handlePageModal()

    const handleMenu = ({ key }: MenuInfo, pageKey: string) => {
      let page = appInfo.pages.find((item) => {
        return item.key === pageKey
      })
      switch (key) {
        case '1':
          openAppModal(false, {
            key: page!.key,
            name: page!.name,
            height: page!.config.height || '667px',
            backgroundColor: page!.config.backgroundColor,
            backgroundImage: page!.config.backgroundImage,
            backgroundSize: page!.config.backgroundSize,
            backgroundRepeat: page!.config.backgroundRepeat,
          })
          break
        case '2':
          console.log(pageKey, '删除')
          break
        default:
          break
      }
    }

    const handleTreeSelect = (type: string, selectedKeys: string) => {
      if (type === 'page' && currentPage.value !== selectedKeys) {
        changeCurrentPage(selectedKeys)
      }
      if (type !== 'page' && currentPage.value !== selectedKeys) {
        changeCurrentCom(selectedKeys)
      }
    }

    const pageModalSubmit = () => {
      pageModalFormRef.value.validate().then(() => {
        if (isAddPage.value) {
          // 添加页面
          const page = {
            key: 'page_' + uuid(),
            name: pageModalForm.name,
            config: {
              height: pageModalForm.height,
              backgroundColor: pageModalForm.backgroundColor,
              backgroundImage:
                pageModalForm.backgroundImage ||
                require('../../assets/img/image-template2.jpg'),
              backgroundSize: pageModalForm.backgroundSize,
              backgroundRepeat: pageModalForm.backgroundRepeat,
            },
          }
          addAppPage(page)
          message.success('添加成功')
        } else {
          // 修改页面配置
          editPageConfig(pageModalForm.key, {
            key: pageModalForm.key,
            name: pageModalForm.name,
            height: pageModalForm.height,
            backgroundColor: pageModalForm.backgroundColor,
            backgroundImage: pageModalForm.backgroundImage,
            backgroundSize: pageModalForm.backgroundSize,
            backgroundRepeat: pageModalForm.backgroundRepeat,
          })
          message.success('修改成功')
        }
        closePageModal()
      })
    }

    return {
      appInfo,
      currentPage,
      showPageModal,
      isAddPage,
      pageModalFormRef,
      pageModalForm,
      pageModalRules,
      pageModalLayout,
      handleTreeSelect,
      openAppModal,
      closePageModal,
      handleMenu,
      pageModalSubmit,
    }
  },
})
</script>

<style lang="less" scoped>
.page-list-page {
  padding-top: 10px;
  .add-btn {
    margin-left: 8px;
  }
  .tree-name {
    display: inline-block;
    width: 180px;
    font-size: 14px;
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .ant-dropdown-link {
    color: #878f95;
  }
}
</style>

<style lang="less">
.page-list-page {
  .ant-tree-directory {
    .ant-tree-node-content-wrapper {
      line-height: 21px;
    }
    .ant-tree-node-selected {
      .ant-dropdown-link {
        color: #ffffff;
      }
    }
  }
}
</style>